import type { FC } from 'react';
import { Tabs, type TabsProps } from 'antd';
import { useMemo } from 'react';
import Tools from './tools';
import type { ToolTabsProps } from './types';

const ToolTabs: FC<ToolTabsProps> = (props) => {
  const { tabs, selectedChild } = props;

  const defaultActiveKey = selectedChild?.tab;
  const activeId = selectedChild?.selectedItem?.id;

  const items = useMemo<TabsProps['items']>(() => {

    return tabs.map(item => {
      return {
        key: item.tab,
        tabKey: item.tab,
        label: item.label,
        children: (
          <Tools
            tab={item.tab}
            activeId={activeId}
            tools={item.tools}
          />
        )
      }
    });
  }, [tabs]);

  return (
    <Tabs
      items={items}
      defaultActiveKey={defaultActiveKey}
    />
  );
}

export default ToolTabs;